<!-- 分诊管理 -->
<template>
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-form ref="searchFormRef" label-width="auto" :inline="true" class="top">
        <el-row type="flex" justify="space-between">
          <el-col :span="12" class="searchs-y">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col>
        <el-form ref="searchFormRef" :model="search" label-width="80px" :inline="true">
          <el-form-item>
            <el-input v-model="custQuery" class="inputCss" placeholder="姓名、手机号、会员号" clearable @change="handleChange" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">搜索</el-button>
            <el-button @click="eliminate">清除</el-button>
          </el-form-item>
        </el-form>
      </el-col> -->
          <el-col :span="2" class="buttons" :offset="14">
            <el-button style="margin-top: 15px;" @click="handleAddTriage">+增加分诊</el-button>
          </el-col>
        </el-row>
        <el-row class="mounteds" type="flex">
          <Search class="mr10 el-select-y" :data="yTSDay" :attribute="'createdTime'" @dateChange="handleDateChange" @change="handleTypeChange" />
          <DictionarySelector class="dictSelector el-select-y" placeholder="请选择就诊类型" :value.sync="search.treatType" code="swan_front_jzlx" @change="handleTreatType" />
          <el-select v-model="search.adviserId" placeholder="请选择咨询师" clearable class="dictSelector el-select-y" @change="handleAdviserId">
            <el-option v-for="item in adviserOptions" :key="item.id" :label="item.usrName" :value="item.id" />
          </el-select>
          <DictionarySelector placeholder="请选择渠道" :value.sync="search.source" code="swan_source" class="dictSelector el-select-y" @change="handleSource" />
        </el-row>
        <el-row class="mt10">
          <TypeSelection class="TypeSelection" :data="filtrateList" :default-value="search.status" :on-change="handleConditionChange" />
        </el-row>
      </el-form>
    </div>
    <div class="mt10 box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table v-loading="loading" :data="tableData" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="性别" prop="customerSex" :show-overflow-tooltip="true" />
        <el-table-column label="分诊类型" prop="treatType" :show-overflow-tooltip="true" />
        <el-table-column label="咨询分类/项目" :show-overflow-tooltip="true" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.treatType === "复查"?scope.row.intentCaseName:scope.row.adviserType }}</span>
          </template>
        </el-table-column>>
        <el-table-column label="排台方式" prop="arrangeType" :show-overflow-tooltip="true" />
        <el-table-column label="咨询师" prop="adviserName" :show-overflow-tooltip="true" />
        <el-table-column label="主治医生" prop="faceDoctorName" :show-overflow-tooltip="true" />
        <el-table-column label="分诊时间" prop="triageTime" :show-overflow-tooltip="true" min-width="120" />
        <el-table-column label="分诊人" prop="accepterName" :show-overflow-tooltip="true" />
        <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" />
        <el-table-column v-if="search.status === '未接待'" :key="Math.random()" label="前面人数" prop="waitMan" :show-overflow-tooltip="true" />
        <el-table-column v-if="search.status === '未接待'" :key="Math.random()" label="已等时间" prop="waitTime" :show-overflow-tooltip="true" />
        <el-table-column v-else :key="Math.random()" label="接待时间" prop="receiveTime" :show-overflow-tooltip="true" min-width="120" />
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === '未接待'" type="text" @click="toSendBtn(scope.row)">改派</el-button>
            <el-button v-if="scope.row.status === '未接待'" type="text" @click="cancelBtn(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <Dialog ref="subscribeRef" :title.sync="title" :visible.sync="visible" :flag="flag" :customer="customerName" @success="getSubscribeList()" />
  </div>
</template>

<script>
window.onbeforeunload = event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
import { DictionarySelector } from "@rabbit.do/rabbit";
import { TypeSelection } from "@monkey.do/monkey";
import Dialog from "./dialog";
import Search from "@/components/Search";
import { yTSDay } from "@/config";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    DictionarySelector,
    TypeSelection,
    Search,
    Dialog,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      yTSDay,
      filtrateList: [
        {
          name: "全部",
          id: "全部",
        },
        {
          name: "未接待",
          id: "未接待",
        },
        {
          name: "已接待",
          id: "已接待",
        },
        {
          name: "已取消",
          id: "已取消",
        },
      ],
      search: {
        status: "未接待",
        adviserId: undefined,
      },
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      tableData: [],
      adviserOptions: [],
      customerName: "",
      title: "",
      visible: false,
      flag: false,
      loading: false,
      custQuery: "",
    };
  },
  mounted() {
    this.getSubscribeList();
    this.getAdviserData();
    if (this.$route.query.isPopup) {
      this.handleAddTriage(this.$route.query.row);
      this.$router.push({
        query: {},
      });
    }
    this.timer = setInterval(() => {
      this.getSubscribeList();
    }, 1000 * 60);
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    handleChange() {
      this.params.page = 1;
      this.getSubscribeList();
    },
    async getSubscribeList() {
      if (!this.search.createdTime) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        this.search.timeType = "today";
        this.search.createdTime = beginTime + "_" + endTime;
      }
      this.loading = true;
      const res = await this.$api["reception/triage/triageList"]({
        ...this.params,
        query: this.search,
        custQuery: this.custQuery,
      });
      this.loading = false;
      if (res.code !== 200) { return this.$message.error("查询分诊列表数据失败！"); }
      if (res.data.result.length < 1 && this.flag) {
        this.title = "暂无分诊";
        this.visible = true;
        this.$refs.subscribeRef.notTriage();
      }
      this.tableData = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(pagination) {
      this.params = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getSubscribeList();
    },
    // 搜索
    searchBtn() {
      this.getSubscribeList();
      this.customerName = this.search.customerName;
      // this.flag = true;
    },
    // 增加分诊
    handleAddTriage() {
      this.title = "增加分诊";
      this.flag = false;
      this.visible = true;
      this.$refs.subscribeRef.addTriageBtn();
    },
    // 改派
    toSendBtn(row) {
      this.title = "修改分诊";
      this.flag = false;
      this.visible = true;
      this.$refs.subscribeRef.editTriageBtn(row);
    },
    // 取消
    async cancelBtn(row) {
      const confirmResult = await this.$confirm("请确认是否取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已撤回取消操作！");
      }
      const res = await this.$api["reception/triage/cancel"]({ id: row.id });
      if (res.code !== 200) return this.$message.error("取消失败！");
      this.getSubscribeList();
    },
    // 咨询师
    async getAdviserData() {
      const adviserData = await this.$api["reception/triage/AllByJobName"]({
        hospitalJobName: "咨询师",
      });
      if (adviserData.code === 200) {
        this.adviserOptions = adviserData.data;
      }
    },
    // 顶部条件筛选
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.flag = false;
      this.getSubscribeList();
    },
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.flag = false;
      this.getSubscribeList();
    },
    handleConditionChange(val) {
      if (val.id === "全部") {
        val.id = "";
      }
      this.search.status = val.id;
      this.flag = false;
      this.getSubscribeList();
    },
    handleTreatType() {
      this.getSubscribeList();
    },
    handleAdviserId() {
      if (!this.search.adviserId) {
        this.search.adviserId = undefined;
      }
      this.getSubscribeList();
    },
    handleSource() {
      this.getSubscribeList();
    },
    eliminate() {
      this.search = {};
      this.custQuery = "";
      this.params.page = 1;
      this.getSubscribeList();
    },
  },
};
</script>

<style lang="scss" scoped>

.mounteds {
  margin-bottom: 10px;
}
/deep/.el-date-editor .el-range__icon{
  color: #D3DFF7;
}
/deep/.el-icon-circle-close{
  color: #D3DFF7;
}
.el-select.dictSelector.el-select-y.el-select--small{
  margin-left: 10px;
}
</style>
